<template>
	<el-container>
		<el-header>就诊流程帮助</el-header>
		<el-main>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content1 bg-purple"></div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content1 bg-purple">
						<el-steps :active="5" align-center>
							<el-step title="步骤1" description="填写个人信息，领取就诊卡"></el-step>
							<el-step title="步骤2" description="收费挂号"></el-step>
							<el-step title="步骤3" description="凭号到相应诊室就诊"></el-step>
							<el-step title="步骤4" description="检查缴费"></el-step>
							<el-step title="步骤5" description="取药或进一步诊断"></el-step>
						</el-steps>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
		</el-main>
		<el-footer>
			<el-row :gutter="20">
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button @click="open">返回登录界面</el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="grid-content bg-purple1" align="center"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button plain @click="open2">
							遇到问题，呼叫工作人员
						</el-button>
					</div>
				</el-col>
			</el-row>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		methods: {
			open() {
				this.$router.push({
					path: '/',
					replace: true
				});
			},
			open2() {
				this.$notify({
					title: '您好！',
					message: '请稍等，已呼叫工作人员！',
					position: 'bottom-right'
				});
			}

		}
	}
</script>
<style>
	.el-footer {
		background-color: #4FC1B0;
		color: #333;
		text-align: center;
		line-height: 60px;
		border-radius: 10px;
	}

	.el-header {
		text-align: left;
		font-size: 40px;
		color: #ffffff;
		border-radius: 10px;
		background-color: #4FC1B0;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		height: 610px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		background: #ffffff;
	}

	.bg-purple1 {
		background: #4FC1B0;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.grid-content1 {
		border-radius: 4px;
		min-height: 200px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
